<template>
  <!--全屏-->
  <el-button size="small" icon="FullScreen" :circle="true" @click="onToggle"></el-button>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

import screenfull from 'screenfull';

// 是否全屏
const isFullscreen = ref(false);

// 切换事件
const onToggle = () => {
  screenfull.toggle();
  // isFullscreen.value = !isFullscreen.value  此处也可以，但是为了使用screenfull 的  on 和 off 的方法。如以下内容
};

// 监听变化
const change = () => {
  isFullscreen.value = screenfull.isFullscreen;
};

// 设置侦听器
onMounted(() => {
  screenfull.on('change', change);
});

// 删除侦听器
onUnmounted(() => {
  screenfull.off('change', change);
});
</script>
<script lang="ts">
export default {
  name: 'Screenfull'
};
</script>
<style lang="scss" scoped></style>
